<template>
  <section class="home-all-cities" v-if="Object.keys(allCities).length !== 21">
    <city-list
      v-for="(item, key, index) in cityData"
      :cities="item"
      :key="index"
      :letter="key"
    />
  </section>
</template>

<script>
import CityList from "components/content/home/cityModule/CityList";

export default {
  data() {
    return {};
  },
  props: {
    allCities: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    cityData() {
      const values = {};
      const arr = Object.keys(this.allCities)
        .map((item) => {
          return item.charCodeAt();
        })
        .sort((a, b) => {
          return a - b;
        });
      const sortobj = arr.map((item) => {
        return String.fromCharCode(item);
      });
      for (const index of sortobj) {
        values[index] = this.allCities[index];
      }
      return values;
    },
  },
  components: {
    CityList,
  },
};
</script>
<style lang="less" scoped>
.home-all-cities {
  background-color: #fff;
}
</style>